<template>
  <div>
    <ul>
      <li
        v-for="item in nodeData"
        :key="item.nodeId"
        @click="toNodeDetail(item)"
      >
        <NodeLi :nodeData="item" />
      </li>
    </ul>
  </div>
</template>

<script>
import { getCookie } from "@/tool/ToolCookie";
import NodeLi from "@/components/nodeListValue/NodeLi.vue";
export default {
  props: ["userId"],
  data() {
    return {
      nodeData: [],
      // 分页数据
      page: {
        currentPage: 1,
        pageSize: 7,
      },
    };
  },
  components: {
    NodeLi,
  },
  methods: {
    // 点击笔记跳转
    toNodeDetail(item) {
      const routeData = this.$router.resolve({
        path: "/nodeDetail",
        query: {
          // 将笔记数据传递给跳转的路由，便于显示对应笔记的内容
          className: item.className,
          id: item.id,
          language: item.language,
          nodename: item.nodename,
          popularity: item.popularity,
          time: item.time,
          username: item.username,
          userId: item.userId,
          description: item.description,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 滚动处理事件
    pageScroll() {
      // 获取滚动距离(当前屏幕最上方距离页面最顶部的距离)
      let scrollTop = document.documentElement.scrollTop;
      // 获取滚动高度(整个HTML高度,页面内容的高度)
      let scrollHeight = document.documentElement.scrollHeight;
      // 获取屏幕高度
      let clientHeight = document.documentElement.clientHeight;
      // 当滚动距离+屏幕高度 >= 内容高度，证明到底，加载新数据
      if (scrollTop + clientHeight >= scrollHeight) {
        this.getNode();
        this.page.currentPage += 1
      }
    },
    // 获取用户所有笔记
    getNode() {
      this.$axios({
        method: "post",
        url: "http://localhost:8181/node/findByUserId/" + this.userId + "/" + this.page.currentPage + "/" + this.page.pageSize,
      }).then(
        (res) => {
          // for遍历，为每一个node添加username属性
          res.data.data.nodes.forEach((element) => {
            element.username = res.data.data.user.username;
            this.nodeData.push(element)
          });
          // 页数+1
          this.page.currentPage += 1
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
  mounted() {
    // 监听页面滚动
    window.onscroll = this.pageScroll;
    // 判断是否登录
    if (getCookie("userId") == null) {
      return; // 未登录不请求数据
    }
    // 获取用户所有笔记
    this.getNode()
  },
};
</script>

<style scoped>
ul {
  list-style: none;
}
</style>